import React, { useEffect, useState, Key } from "react";
import { Button, Form, Input, Table, Card, message, Tooltip } from "antd";
import { MonitorOutlined, EditOutlined, RestOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
// 引入css样式
import style from "./index.module.css";
// 引入api请求
import {
  getHosSetListRequest,
  deleteList,
  BatchDeleteDataRequest,
} from "@api/hospital/hospitalSet";
// 引入类型
import type {
  getHosSetListRecordsType,
  getHosSetListItemType,
} from "@api/hospital/model/hospitalSetTypes";
import type { searchHosFinishPraType } from "./type";
export default function HospitalSet() {
  // 引入useNavigate来使用navigate重定向
  const navigate = useNavigate();
  // 表单的数据
  const [hospitalList, setHospitalList] = useState<getHosSetListRecordsType>(
    []
  );
  // 定义当前页码
  const [current, setCurrent] = useState(1);
  // 定义pageSize(每页的数量)
  const [pageSize, setPageSize] = useState(15);
  // 定义total(总个数)
  const [total, setTotal] = useState(0);
  //定义isLoading(table是否加载中)
  const [isLoading, setIsLoading] = useState(false);
  // 定义搜索内的状态
  const [fieldValue, setFieldValue] = useState<searchHosFinishPraType>({});
  // 定义批量删除按钮的显示样式
  const [BatchDeletionStatus, setBatchDeletionStatus] = useState(true);
  // 定义idlist的保存
  const [idListDate, setIdListDate] = useState<Key[]>([]);
  useEffect(() => {
    setIsLoading(true);
    // 开始的时候调用
    getHosSetList();
  }, [current, pageSize, fieldValue]); //监听数据 发生改变时渲染数据

  //colums是控制表格的字段有哪些,title属性就是当前的字段名称,dataIndex就是用来和将来的数据进行一一对应的
  const columns = [
    {
      title: "序号",
      dataIndex: "index",
      width: 80,
      render(_: any, __: any, index: number) {
        return index + 1;
      },
    },
    {
      title: "医院名称",
      dataIndex: "hosname",
    },
    {
      title: "医院编号",
      dataIndex: "hoscode",
      width: 120,
    },
    {
      title: "api基础路径",
      dataIndex: "apiUrl",
    },
    {
      title: "签名",
      dataIndex: "signKey",
    },
    {
      title: "联系人姓名",
      dataIndex: "contactsName",
      width: 120,
    },
    {
      title: "联系人手机",
      dataIndex: "contactsPhone",
      width: 120,
    },
    {
      title: "操作",
      dataIndex: "do",
      width: 120,
      fixed: "right" as "right", //固定再右边
      // 从render里获得id值
      render(_: any, data: getHosSetListItemType) {
        const { id } = data;
        return (
          <div>
            {/* 列表每一列修改按钮 */}
            <Tooltip title="修改医院" color={"green"}>
              <Button
                type="primary"
                icon={<EditOutlined />}
                className={style.mr}
                // 添加修改点击事件  通过param传参将id传过去
                onClick={() => {
                  navigate(`/syt/hospital/upDataResult/${id}`);
                }}
              ></Button>
            </Tooltip>

            {/* 列表每一列删除按钮 */}
            <Tooltip title="删除医院" color={"red"}>
              <Button
                type="primary"
                danger
                icon={<RestOutlined />}
                onClick={DeleteData(id)}
              ></Button>
            </Tooltip>
          </div>
        );
      },
    },
  ];
  // 事件回调函数
  // 点击切换页码
  const isChange = (current: number, pageSize: number) => {
    setCurrent(current);
    setPageSize(pageSize);
  };
  // 模糊查询
  const searchHosFinishHandle = (fieldValue: searchHosFinishPraType) => {
    setFieldValue(fieldValue);
  };
  // 点击弹出组件页面
  const addHosHandle = () => {
    navigate("/syt/hospital/addResult");
  };
  // 删除的函数
  const DeleteData = (id: string) => {
    return async () => {
      await deleteList(id);
      message.success("删除医院成功");
      // 重新获取最新医院列表即可
      getHosSetList();
    };
  };
  // 批量删除的函数
  const BatchDelete = async () => {
    // 发送批量删除的指令
    await BatchDeleteDataRequest(idListDate);
    // 弹出
    message.success("删除成功");
    // 改变批量删除按钮的状态
    setBatchDeletionStatus(true);
    // 清空idList里的数据
    setIdListDate([]);
    // 控制状态让他重新渲染
    getHosSetList();
  };
  // 请求分页列表的数据
  const getHosSetList = async () => {
    const result = await getHosSetListRequest({
      page: current,
      limit: pageSize,
      ...fieldValue,
    });
    // 修改表单的数据
    setHospitalList(result.records);
    // 修改总页数
    setTotal(result.total);
    // 修改加载中的状态
    setIsLoading(false);
  };
  return (
    <div className={style.formSheet}>
      {/* 表单书写 */}
      <Card>
        <Form
          name="basic"
          wrapperCol={{ span: 30 }}
          layout="inline"
          onFinish={searchHosFinishHandle}
        >
          <Form.Item name="hosname">
            <Input placeholder="医院名称" />
          </Form.Item>

          <Form.Item name="hoscode">
            <Input placeholder="医院编号" />
          </Form.Item>
          {/* 表单的功能按钮 */}
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit" icon={<MonitorOutlined />}>
              查询
            </Button>
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="default" htmlType="reset">
              清空
            </Button>
          </Form.Item>
        </Form>
        {/* 功能按钮 */}
        <div className={style.mt}>
          {/* 点击添加时跳转页面进行编辑 */}
          <Button
            type="primary"
            htmlType="submit"
            onClick={addHosHandle}
            className={style.mr}
          >
            添加
          </Button>
          {/* 点击删除当前列 */}
          <Button
            type="default"
            danger
            disabled={BatchDeletionStatus}
            htmlType="reset"
            onClick={BatchDelete}
          >
            批量删除
          </Button>
        </div>
        {/* 表格 根据数据来渲染表格*/}
        <Table
          className={style.mm} //样式
          columns={columns}
          dataSource={hospitalList} //获取数据生成每一行
          scroll={{ x: 1800 }} //超出产生滚动条
          bordered //实线
          rowKey="id" //再table中 要求
          // 加载
          loading={isLoading}
          // 控制多选框的显示
          rowSelection={{
            // 这里面存着每一个被选中数据的id和数据
            onChange(idList: Key[]) {
              // 如果被选择 控批量删除按钮的状态
              if (idList) {
                setBatchDeletionStatus(!idList.length);
                setIdListDate(idList);
              }
            },
          }}
          pagination={{
            //页码的配置：当前页码
            current,
            //总数据的数量
            total,
            //每页条数
            pageSize,
            //展示更改每页条数的选项(默认total大于50条的时候开启)
            pageSizeOptions: [3, 8, 15],
            //是否直接开启更新每页条数的选项
            showSizeChanger: true,
            showTotal(total) {
              return `总共有${total}条数据`;
            },
            onChange: isChange,
          }}
        />
      </Card>
    </div>
  );
}
